<template>
  <div>
    <public-head :title="title" :path="path" />
    <public-title :title="yushiTitle" />
    <van-collapse v-model="activeNames">
      <!-- 原始工单 -->
      <van-collapse-item title="#1 原始工单" name="1">
        <div v-for="(item, index) in originalSheet" :key="index">
          <p>
            <span>{{ item.name }}</span
            ><span>{{ item.data }}</span>
          </p>
        </div>
        <p>
          <span>附件文件</span
          ><span
            ><img
              class="fujianmingImg"
              src="../../../../public/images/my/fujianwen.png"
              alt=""
            />附件文件名</span
          >
        </p>
      </van-collapse-item>
      <!-- 营销派单 -->
      <van-collapse-item title="#2 营销派单 202105110001" name="2">
        <select-dialog
          :dialogData="dialogData"
          contents="派单编号"
          :vanValue.sync="dispatchValue"
        />
        <select-dialog
          :dialogData="workOrderData"
          contents="工单分类"
          :vanValue.sync="workOrderValue"
        />
        <input-write
          leftTitle="工单来源"
          placeholder="事假"
          @inputChanged="inputChangedMer($event)"
        ></input-write>
        <input-write
          leftTitle="接诉线别"
          placeholder="事假"
          @inputChanged="changedXianbie($event)"
        ></input-write>
        <input-write
          leftTitle="接诉分类"
          placeholder="事假"
          @inputChanged="changedFenlei($event)"
        ></input-write>
        <select-checkbox
          :dialogData="undertakerData"
          contents="承办单位"
          :vanValue="undertakerValue"
        ></select-checkbox>
        <select-checkbox
          :dialogData="chengbanPersonnelData"
          contents="承办人员"
          :vanValue="undertakerValue"
        ></select-checkbox>
        <select-checkbox
          :dialogData="peiheBumenData"
          contents="配合部门"
          :vanValue="undertakerValue"
        ></select-checkbox>
        <select-checkbox
          :dialogData="peiheRenyuanData"
          contents="配合人员"
          :vanValue="undertakerValue"
        ></select-checkbox>
        <input-write
          leftTitle="事发地点"
          placeholder="北京"
          @inputChanged="changedDidian($event)"
        ></input-write>
        <input-write
          leftTitle="是否回复"
          placeholder="是否"
          @inputChanged="changedHuifu($event)"
        ></input-write>
        <input-write
          leftTitle="处理时限"
          placeholder="0天"
          @inputChanged="changedShixian($event)"
        ></input-write>
        <van-cell is-link>
          <template #title>
            <span class="custom-title">截止时间</span>
            <van-tag type="danger">*</van-tag>
            <input type="text" placeholder="请输入" class="ipt" />
            <p>
              <span class="jiaozhun"
                >自动校准处理时限 <a href="a">《了解详情》</a></span
              >
            </p>
          </template>
        </van-cell>
        <div class="instructions">
          <p>派单说明</p>
          <van-field
            v-model="message"
            rows="2"
            autosize
            type="textarea"
            maxlength="30"
            placeholder="请输入派单说明"
            show-word-limit
          />
          <p>
            <span>自动校准处理时限 <a href="a">《了解详情》</a></span>
          </p>
        </div>
        <div class="enclosure">
          <p>说明附件</p>
          <van-uploader v-model="fileList" multiple />
        </div>
      </van-collapse-item>
      <!-- 基层回复 -->
      <van-collapse-item title="#3 基层回复" name="3">
        <p class="radioAll">是否退回 <button>退回</button></p>
        <div v-for="(item, index) in singleChoice" :key="index">
          <p class="radioAll">
            {{ item.name }}
            <van-radio-group v-model="item.index" direction="horizontal">
              <van-radio name="1">{{ item.yes }}</van-radio>
              <van-radio name="2"> {{ item.no }}</van-radio>
            </van-radio-group>
          </p>
        </div>
        <div class="instructions jiceng">
          <p>基层回复说明</p>
          <van-field
            v-model="message"
            rows="2"
            autosize
            type="textarea"
            maxlength="30"
            placeholder="请输入派单说明"
            show-word-limit
          />
          <p>
            <span>自动校准处理时限 <a href="a">《了解详情》</a></span>
          </p>
        </div>
        <div class="enclosure luyin">
          <p>回复乘客录音</p>
          <van-uploader v-model="fileList" multiple />
        </div>
        <div class="enclosure">
          <p>基层回复附件</p>
          <van-uploader v-model="fileList" multiple />
        </div>
      </van-collapse-item>
      <!-- 基层退回 -->
      <van-collapse-item title="#3 基层退回" name="4">
        <van-cell is-link>
          <template #title>
            <span class="custom-title">退回原因</span>
            <van-tag type="danger">*</van-tag>
            <input type="text" placeholder="事假" class="ipt" />
          </template>
        </van-cell>
        <div class="instructions jiceng">
          <p>基层回复说明</p>
          <van-field
            v-model="message"
            rows="2"
            autosize
            type="textarea"
            maxlength="30"
            placeholder="请输入派单说明"
            show-word-limit
          />
          <p>
            <span>自动校准处理时限 <a href="a">《了解详情》</a></span>
          </p>
        </div>
        <div class="enclosure">
          <p>基层回复附件</p>
          <van-uploader v-model="fileList" multiple />
        </div>
      </van-collapse-item>
    </van-collapse>
    <!-- 营销派单 -->
    <public-title :title="yingxiaoTitle" />
    <van-collapse v-model="activeNames">
      <van-collapse-item
        title="#3 营销派单 909666343"
        name="1"
        v-for="(item, index) in itemcount"
        :key="index"
        :id="'myid' + index"
        v-model="myValue[index]"
      >
        <van-cell is-link>
          <template #title>
            <span class="custom-title">请假类型</span>
            <van-tag type="danger">*</van-tag>
            <input type="text" placeholder="事假" class="ipt" />
          </template>
        </van-cell>

        <van-cell is-link class="last-van">
          <template #title>
            <span class="custom-title">请假类型</span>
            <van-tag type="danger">*</van-tag>
            <input type="text" placeholder="事假" class="ipt" />
          </template>
        </van-cell>
      </van-collapse-item>
      <van-button :icon="addPaidan" class="add" @click="add()"
        >添加派单工单</van-button
      >
      <van-button :icon="deletePaidan" class="delete" @click="deletes()"
        >删除派单工单</van-button
      >
    </van-collapse>
    <!-- 审批人 -->
    <public-title :title="shenpiTitle" />
    <div class="person">
      <van-cell>
        <template #title>
          <span class="custom-title">审批人：</span>
          <input type="text" placeholder="请输入" />
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <span class="custom-title">抄送人：</span>
          <input type="text" placeholder="请输入" />
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import PublicHead from "../../../components/PublicHead";
import PublicTitle from "../../../components/PublicTitle";
import SelectDialog from "../../components/SelectDialog";
import InputWrite from "../../components/InputWrite";
import SelectCheckbox from "../../components/SelectCheckbox";
export default {
  name: "DaiBan",
  components: {
    PublicHead,
    PublicTitle,
    SelectDialog,
    InputWrite,
    SelectCheckbox,
  },
  data() {
    return {
      title: "服务工单",
      path: "daiban",
      yushiTitle: "原始工单",
      activeNames: ["1"],
      yingxiaoTitle: "营销派单",
      shenpiTitle: "审批人&抄送人",
      originalSheet: [
        { name: "工单编号", data: "XXX-XXX-XX" },
        { name: "工单标题", data: "15号线六道口站站务员捡拾失物" },
        { name: "工单内容", data: "15号线六道口站站务员捡拾失物" },
        { name: "派单时间", data: "2020-07-07  11:33:01" },
        { name: "派单人员", data: "马妍" },
        { name: "截止时间", data: "2020-07-07  11:33:01" },
        { name: "处理时限", data: "3天" },
        { name: "来电时间", data: "2020-07-07  11:33:01" },
        { name: "来电人员", data: "刘先生" },
        { name: "来电号码", data: "1345678993" },
      ],
      dispatchValue: "系统自动生成 ",
      dialogData: [
        {
          id: 1,
          value: "🍎🍎🍎",
        },
        {
          id: 2,
          value: "🍑🍑🍑",
        },
        {
          id: 3,
          value: "🍇🍇🍇",
        },
      ],
      workOrderValue: "事假",
      workOrderData: [
        { id: 1, value: "事假" },
        { id: 2, value: "病假" },
        { id: 3, value: "婚假" },
      ],
      cascaderValue: "",
      laiyuanVal: "",  //工单来源
      xianbieVal: "",   //接诉线别
      fenleiVal: "",    //接诉分类
      undertakerValue: "选择部门及人员",
      undertakerData: [],
      chengbanPersonnelData: [],
      peiheBumenContent: "配合部门",
      peiheBumenData: [],
      peiheRenyuanData: [],
      didianVal: "",   //事发地点
      huifuVal: "",     //是否回复
      shixianVal: "",    //处理时限
      message: "",
      fileList: [
        { url: "https://img01.yzcdn.cn/vant/leaf.jpg" },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: 'https://cloud-image', isImage: true },
      ],
      // radio: '',
      singleChoice: [
        { name: "已联系乘客", yes: "是", no: "否" },
        { name: "乘客已满意", yes: "是", no: "否" },
        { name: "问题已解决", yes: "是", no: "否" },
      ],
      addPaidan: require("../../../../public/images/my/add.png"),
      deletePaidan: require("../../../../public/images/my/delete.png"),
      itemcount: 1,
      myValue: [],
    };
  },
  mounted() {
    // console.log(radio,'909');
  },
  methods: {
    add() {
      this.itemcount += 1;
    },
    deletes() {
      this.itemcount -= 1;
    },
     //输入框事件监听
    inputChangedMer: function (e) {
      this.laiyuanVal = e.target.value
      console.log(this.laiyuanVal)
    },
    changedXianbie(e){
      this.xianbieVal = e.target.value
    },
    changedFenlei(e){
      this.fenleiVal = e.target.value
    },
    changedDidian(e){
      this.didianVal = e.target.value
    },
    changedHuifu(e){
      this.huifuVal = e.target.value
    },
    changedShixian(e){
      this.shixianVal = e.target.value
      console.log(this.shixianVal);
    }
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.van-collapse{
  width 345px
  margin 0  15px
  .van-collapse-item{
    margin-bottom 14px
    p{
      display flex
      justify-content space-between
      line-height 24px
      span:last-child{
          color #333333
      }
      }
      .fujianmingImg{
        width 18px
        height 18px
        vertical-align middle
        margin-right 6px
        margin-bottom 4px
      }
      .radioAll{
        border-bottom 1px solid #DDDDDD
        line-height 60px
        button{
          color #198AFF
          background-color: rgba(25, 138, 255, 0.6);
          border: 0;
          border-radius: 5px;
          line-height: 35px;
          margin-top 14px
          width 90px
          height 35px

        }
      }
  }
  a{
      color #198AFF
      font-size 13.5px
  }
  .jiaozhun{
      color #999 !important
  }
  .instructions{
    border-bottom 1px solid #DDDDDD
    padding 10px 0
    box-sizing border-box
    p{
        font-size 15.5px
        color #333333
        font-weight bold
        span{
          font-size 13.5px
          color #999999  !important
        }
    }
    .van-field{
        border: 1px solid #ddd;
        border-radius 5px
        margin 8px 0
    }
  }
  .jiceng{
    p{
      font-weight normal
      color #999
    }
  }
  .luyin{
    border-bottom 1px solid #DDDDDD
    padding-bottom: 8px;
    box-sizing: border-box;
  }
  .enclosure{
    p{
      line-height 50px
      font-size 15.5px
      color #333333
      font-weight bold
    }
  }
}
.van-button--normal {
    font-size: 13px;
    border-radius: 5px;
    margin: 10px 15px 10px 0;
}
.add{
  background-color rgba(26, 223, 171, 0.5)
  color #1ADFAB
}
.delete{
  background-color rgba(25, 138, 255, 0.5)
  color #198AFF
}
.person{
  width 345px
  margin 0 auto
  margin-bottom 15px
  .van-cell:last-child{
    border 0
  }
}
.van-cell{
  border-bottom 1px solid #ddd
}
.van-tag--danger{
    background-color #fff
    color rgba(253, 63, 63, 1)
  }
  input{
    margin-left 10px
  }
  .ipt{
    float: right;
    width: 50px;
  }
  .last-van{
    border 0
  }
</style>
